<template>
  <div class="partyMember-activist-index-warp">
    <LeftRightLayout leftWidth="230px" class="hyjl-index-wrap">
      <template slot="left">
        <div class="title">下拉树</div>
        <el-tree
          ref="treeRef"
          :props="defaultProps"
          :data="sourceTree"
          :expand-on-click-node="true"
          :highlight-current="true"
          @node-click="clickHandlerTree"
          style="height: calc(100% - 55px);"
        />
      </template>

      <ListLayout title="表格" :topRightWidth="635" slot="right">
        <el-form
          slot="top-right"
          slot-scope="props"
          inline
          class="search-form"
          :model="queryFormData"
          label-width="70px"
          @submit.native.prevent
          size="mini"
        >
          <el-form-item prop="name" label-width="0">
            <el-input
              type="text"
              v-model="queryFormData.name"
              clearable
              style="width: 180px"
              placeholder="姓名"
            ></el-input>

            <el-input
              type="text"
              v-model="queryFormData.telephone"
              clearable
              style="width: 180px"
              placeholder="手机号"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" plain >查询</el-button>
            <el-button type="primary" plain >新增</el-button>
            <el-button type="primary" plain >导出</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="list"
          :header-cell-style="{ background: '#f2f2f2' }"
          slot="table"
          style="overflow: auto"
          @select="handleSelection"
          @select-all="handleSelection"
          @selection-change="selectionHandler"
        >
          <el-table-column align="center" type="selection"></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="educationName"
            label="学历"
          ></el-table-column>

          <el-table-column
            show-overflow-tooltip
            prop="postUnit"
            label="工作职务及单位"
          ></el-table-column>
          <el-table-column label="操作" width="150px">
            <template slot-scope="scope">
              <el-button type="text">查看</el-button>
              <el-button type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          slot="page"
          background
          layout="total, prev, pager, next"
          :total="30"
          :page-size="10"
          :current-page.sync="queryFormData.pageNum"
          @current-change="pageNoToggleHandler"
          @size-change="pageSizeToggleHandler"
          class="pageNew"
        ></el-pagination>
      </ListLayout>
    </LeftRightLayout>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sourceTree: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      queryFormData:{},
      list:[
        {educationName:'本科',postUnit:'中国研究院'}
      ]
    };
  },
  created() {

  },
  computed:{

  },
  methods: {
    pageNoToggleHandler(){},
    pageSizeToggleHandler(){},
    clickHandlerTree(){},
    handleSelection(){},
    selectionHandler(){},
  },

}
</script>

<style lang="scss">
.partyMember-activist-index-warp{
  .left-wrap{
    background-color: #FFFFFF;
    height: 100%;
    width: 100%;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
    .title{
      color: #E50D02;
      font-size: 14px;
      font-weight: bold;
      padding: 15px 20px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.16);
    }
    .el-tree{
      min-width: 100%;
      height: calc(100% - 50px);
      display: inline-block !important;
      .el-tree-node__label{
        font-size: 12px;
      }
      .el-tree-node__content{
        //background-color: #ffffff;
        //.el-tree-node__expand-icon:not(.is-leaf){
        //  color: #F01F1B !important;
        //}
        //.el-tree-node is-current is-focusable{
        //  color: #F01F1B !important;
        //}
        //& > div > div{
        //  color: #F01F1B !important;
        //}
      }
    }
  }
  .el-table__fixed-right::before, .el-table__fixed::before{
    height: 0px;
  }
  .el-table::before{
    height: 0px;
  }
}

</style>

